<template>
    <view>
        <view class="search-box">
            <uni-search-bar @input="input" :radius="100" cancelButton="none" ></uni-search-bar>
        </view>
        <!-- 搜索建议列表 -->
        <view class="sugg-list" v-if="searchResults.length!==0">
            <view class="sugg-item" v-for="(item,index) in searchResults" :key="index"
            @click="gotoDetail(item.goods_id)">
            <view class="goods-name">{{item.goods_name}}</view>
            <uni-icons type="arrowright" size="16" color="#0000ff"></uni-icons>                
            </view>
        </view>
        <!-- 搜索历史 -->
        <view class="history-box" v-else>
            <!-- 标题区域 -->
            <view class="history-title">
                <text>搜索历史</text>
                <uni-icons type="trash" size="17" @click="clean"></uni-icons>                
            </view>
            <!-- 列表区域 -->
            <view class="history-list">
                <!-- 3. 页面中渲染搜索关键词的时候,不再使用data中的historyList,而是使用计算属性historys:   -->
                <uni-tag  color="#0000ff" :text="item" v-for="(item,i) in histories" :key="i"
                @click="gotoGoodsList(item)"></uni-tag>                
            </view>
            
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //延时器的timeId
                timer:null,
                //搜索关键词
                kw:"",
                //搜索结果列表
                searchResults:[],
                //搜索关键词历史记录
                historyList:[]
            };
        },
        
        onLoad(){
            //获取"kw"对应的值,如果不存在,用[]代替,用JSON.parse转成化数组
            this.historyList=JSON.parse(uni.getStorageSync("kw") || [])
        },
        
        methods:{
            //input输入事件的处理函数
            input(e){
               //清除timer对应的延时器
               clearTimeout(this.timer)
               this.timer=setTimeout(()=>{
                   //如果500ms内,没有触发输入事件,则为搜索关键词赋值
                   this.kw=e
                   //根据关键词,查询搜索建议列表
                   this.getSearchList()
               },500) 
            },
            //根据关键词,查询搜索建议列表
            async getSearchList(){
                //判断关键词不否为空
                if(this.kw===""){
                    this.searchResults=[] //置为空
                    return
                }
                //不为空:
                const {data:res}=await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.kw})
                if(res.meta.status!==200) return uni.$showMsg()
                this.searchResults=res.message
                
                //1.查询到搜索建议之后,调用saveSearchHistory()方法保存搜索关键词
                this.saveSearchHistory()
            },
            gotoDetail(item){
                uni.navigateTo({
                    //指定详情页面的URL地址,并传递goods_id参数
                    url:"/subpkg/goods_detail/goods_detail?goods_id="+item
                })
            },
            
            //2.保存搜索关键词的方法
            saveSearchHistory(){
                //2.1直接把搜索关键词push到historyList数组中,会有重复问题
                //this.historyList.push(this.kw)
                
                //解决加法:1. 将historyList当成Array数组转化为set对象
                const set=new Set(this.historyList)
                //2. 先把对象删除
                set.delete(this.kw)
                //3. 再将对象添加进去,就完成的去重
                set.add(this.kw)
                //4.将Set对象转化为Array数组赋值给historyList
                this.historyList=Array.from(set)
                
                //调用uni.setStorageSync(key,value)转成字符串,将搜索历史记录持久化存储到本地
                uni.setStorageSync("kw",JSON.stringify(this.historyList))
            },
            //清空搜索历史记录
            clean(){
                this.historyList=[]   //清空记录数组
                uni.setStorageSync("kw","[]")  //清空存储数组
            },
            //点击跳转到商品列表页面
            gotoGoodsList(kw_){
                uni.navigateTo({
                    url:"/subpkg/goods_list/goods_list?query="+kw_
                })
            }
        },
        //定义计算属性
        computed:{
            histories(){
                //注意:由于数组是引用类型,所以不要直接基于原数组调用reverse方法.以免修改数组中元素的顺序
                //而是用...进行数组的复制,再进行serverse反转
                return [...this.historyList].reverse()
            }
        }
    }
</script>

<style lang="scss">
.search-box{
        //设置定位效果:"吸顶"
        position: sticky;
        //吸顶的位置
        top:0;
        //提高层级,防止被轮播图覆盖
        z-index: 999;
    }
    
.sugg-list{
    padding: 0 12px;
    .sugg-item{
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .goods-name{
        // 文本不允许换行(单行文本)
        white-space: nowrap;
        //溢出部分隐藏
        overflow:hidden;
        //文本溢出后使用...代替
        text-overflow: ellipsis;
        
        margin-right: 3px;
        
    }
}

.history-box{
    padding: 0 12px;
    .history-title{
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
    }
    .history-list{
        display: flex;
        flex-wrap: wrap;
        .uni-tag{
            margin-top:5px ;
            margin-right: 5px;
        }
    }
}
</style>
